<template>
  <div>
    <div class="affix_list">
      <!-- <div
        class="list_item"
        v-for="(item, index) in affixList"
        :key="item.value"
      >
        <div class="label">{{ item.suffix }}</div>
        <div class="value">
          <span>{{ item.fileName }}</span>
          <a-progress
            :percent="item.progress ? item.progress : 100"
            size="small"
          />
        </div>
        <div class="action">
          <a-popconfirm
            placement="bottom"
            title="是否确认删除？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteFile(item, index)"
          >
            <span class="delete">
              <a-icon type="delete" />
              <span>删除</span>
            </span>
          </a-popconfirm>
          <span class="preview" @click="yl(item)">
            <a-icon type="eye" />
            <span>预览</span>
          </span>
          <span class="preview" @click="xz(item)">
            <a-icon type="download" />
            <span>下载</span>
          </span>
        </div>
      </div> -->
    </div>
    <div class="btn_up">
      <div v-for="(item, index) in listType2" :key="index">
        <div class="title1">{{ item.typeName }}</div>
        <div
          class="tabs"
          v-for="(item2, index2) in item.children"
          :key="index2"
        >
          <div class="leftboxt">{{ item2.typeName }}</div>
          <div class="rightbox">
            <div
              v-for="(item3, index3) in item2.children"
              :key="index3"
              class="smbox"
            >
              <div
                style="
                  width: 100%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  cursor: pointer;
                "
                @click="ylfile(item3)"
              >
                {{ item3.fileName }}
              </div>
              <a-progress
                :percent="item3.progress"
                size="small"
                v-if="item3.progress || item3.progress == 100"
              />
              <img
                @click="defile(item3, index, index2, index3)"
                class="trash"
                src="../../../assets/images/垃圾桶.png"
                alt=""
              />
            </div>
            <!-- <img class="jiahao" src="../../../assets/images/加号.png" alt="" /> -->
            <a-upload
              name="file"
              :multiple="false"
              :customRequest="uploadImage"
              :beforeUpload="beforeUpload(index2)"
              :showUploadList="false"
            >
              <a-button @click="up(item2.id, index, index2)">
                <a-icon type="upload" />
              </a-button>
            </a-upload>
          </div>
        </div>
      </div>
      <!-- <div class="tabs">
        <div class="leftboxt">播出技术质量奖申报表</div>
        <div class="rightbox">
         <div v-for="(item,index) in filelist" :key="index" class="smbox">
            <div>{{item.label}}</div>
            <img @click="deletefile1(index)" class="trash" src="../../../assets/images/垃圾桶.png" alt="" />
          </div>
          <img class="jiahao" src="../../../assets/images/加号.png" alt="">
        </div>
      </div>
      <div class="tabs">
        <div class="leftboxt">在线作品</div>
        <div class="rightbox">
          <img class="jiahao" src="../../../assets/images/加号.png" alt="">
        </div>
      </div>
      <div class="tabs">
        <div class="leftboxt">广播节目时间表</div>
        <div class="rightbox">
          <img class="jiahao" src="../../../assets/images/加号.png" alt="">
        </div>
      </div>
      <div class="tabs">
        <div class="leftboxt">广播节目播出串联表</div>
        <div class="rightbox">
          <img class="jiahao" src="../../../assets/images/加号.png" alt="">
        </div>
      </div> -->

      <!-- <a-upload
        name="file"
        :multiple="false"
        :customRequest="uploadImage"
        :beforeUpload="beforeUpload"
        :showUploadList="false"
      >
        <a-button> <a-icon type="upload" /> 上传文件 </a-button>
      </a-upload> -->
    </div>
    <!-- 预览框 -->
    <a-modal title="预览" :visible="visible" @cancel="handleCancel" footer="">
      <p>
        <img
          v-if="suffix == 'jpg' || suffix == 'png'"
          style="width: 100%; height: 100%"
          :src="ylsrc"
          alt=""
        />
        <pdf ref="pdf" v-if="suffix == 'pdf'" :src="pdfurl"> </pdf>
        <video
          :src="vdsrc"
          id="videos"
          v-if="suffix == 'mp4' || suffix == 'wav'"
          style="width: 100%; height: 100%"
          autoplay
          controls
        ></video>
        <audio
          id="music"
          :src="adsrc"
          autoplay
          v-if="suffix == 'mp3'"
          controls
        ></audio>
      </p>
    </a-modal>
  </div>
</template>

<script>
import axios from "axios";
import { ossUpload, ossDelete, listType } from "../../../api/index";
import { handleTree } from "../../../utils/handleTree";
import pdf from "vue-pdf";
let OSS = require("ali-oss"); // 引入ali-oss插件
const client = new OSS({
  region: "oss-cn-beijing", //根据那你的Bucket地点来填写
  accessKeyId: "LTAI4G7UZJyHhESptLXc2zTC", //自己账户的accessKeyId
  accessKeySecret: "1Gq3VyZagk99ZLLoxzjUyS8GQQzydo", //自己账户的accessKeySecret
  bucket: "gdysj", //bucket名字
});
export default {
  name: "AffixList",
  props: {
    listType2: Array,
    fileIds2: Array,
    baseId: String,
    states: String,
  },
  components: {
    pdf,
  },
  data() {
    return {
      filelist: [
        { label: "肥东新闻录制技术.pdf" },
        { label: "20220306期新闻.MP4" },
      ],
      affixList: [
        // 附件清单列表
        // {
        //   label: "申请表",
        //   value: "肥东新闻录制技术.pdf",
        //   progress: 60,
        // },
        // {
        //   label: "节目素材",
        //   value: "20220306期新闻.MP4",
        //   progress: 100,
        // },
      ],
      // fileIds: [],
      BASEURL: "http://112.30.214.213:8098",
      visible: false,
      ylsrc: "",
      pdfurl: "",
      vdsrc: "",
      adsrc: "",
      suffix: "",
      listType: [],
      typeId: "",
      index1: "",
      index2: "",
    };
  },
  mounted() {},
  created() {
    this.fileIds = [];
    // this.getlistType();
    this.getlistType();
    console.log(this.listType2);
    this.fileIds = this.fileIds2;
  },
  methods: {
    // deletefile1(e) {
    //   // this.filelist.splice(e, 1);
    // },

    getfilelist() {
      // setTimeout(() => {
      for (let index1 = 0; index1 < this.listType.length; index1++) {
        // const element = this.listType[index];
        for (
          let index2 = 0;
          index2 < this.listType[index1].children.length;
          index2++
        ) {
          // const element = this.listType[index].children[index];
          for (let index3 = 0; index3 < this.affixList.length; index3++) {
            // const element = this.affixList[index];
            if (
              this.listType[index1].children[index2].id ==
              this.affixList[index3].typeId
            ) {
              this.listType[index1].children[index2].children.push(
                this.affixList[index3]
              );
            }
          }
        }
      }
      console.log(this.listType, "附件");
      console.log(this.baseId, "baseid");

      // }, 100);
    },
    beforeUpload(file) {
      // const isJpgOrPng =
      //   file.type === "image/jpeg" ||
      //   file.type === "image/jpg" ||
      //   file.type === "image/png";
      // if (!isJpgOrPng) {
      //   this.$message.error("只能上传jpg/png格式的头像!");
      // }
      // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isLt2M) {
      //   this.$message.error("图片不得大于2MB!");
      // }
      // return isJpgOrPng && isLt2M;
    },
    up(id, index, index2) {
      console.log(this.fileIds2);
      console.log(id, "id");
      this.typeId = id;
      (this.index1 = index), (this.index2 = index2);
    },
    getlistType() {
      listType({
        prizeType: 5,
      }).then((res) => {
        console.log(res, "附件列表");
        console.log(handleTree(res.data, "id"));
        // this.listType2 = handleTree(res.data, "id");
      });
    },
    yl(e) {
      console.log(e);
      this.suffix = e.suffix;
      if (e.suffix == "doc" || e.suffix == "docx") {
        this.$message.error("该文件暂不支持预览");
        return;
      }
      this.ylsrc = "http://gdysj.oss-cn-beijing.aliyuncs.com/" + e.path;
      this.pdfurl = "http://gdysj.oss-cn-beijing.aliyuncs.com/" + e.path;
      this.vdsrc = "http://gdysj.oss-cn-beijing.aliyuncs.com/" + e.path;
      this.adsrc = "http://gdysj.oss-cn-beijing.aliyuncs.com/" + e.path;
      this.visible = true;
    },
    xz(e) {
      // console.log(e)
      window.location.href =
        "http://gdysj.oss-cn-beijing.aliyuncs.com/" + e.path;
    },
    handleCancel() {
      if (document.getElementById("music") != null) {
        let m = document.getElementById("music");
        m.pause(); //暂停
      }
      if (document.getElementById("videos") != null) {
        let m = document.getElementById("videos");
        m.pause(); //暂停
      }
      this.visible = false;
    },
    defile(e, index1, index2, index3) {
      console.log(e);
      console.log(index1);
      // console.log(this.listType2[index1])
      //   // this.affixList.splice(index, 1);
      this.listType2[index1].children[index2].children.splice(index3, 1);
      for (let index1 = 0; index1 < this.fileIds2.length; index1++) {
        const element = this.fileIds2[index1];
        if (e.id == element) {
          this.fileIds2.splice(index1, 1);
        }
      }
      console.log(this.fileIds2);
      this.$emit("fathersave");
    },
    // async deleteFile(e, index1,index2,index3) {
    //   console.log(e)
    //   // this.affixList.splice(index, 1);
    //   // this.listType2[index1].children[index2].children.splice(index3,1)
    //   // for (let index1 = 0; index1 < this.fileIds.length; index1++) {
    //   //   const element = this.fileIds[index1];
    //   //   if (e.id == element) {
    //   //     this.fileIds.splice(index1, 1);
    //   //   }
    //   // }
    //   // console.log(this.fileIds);
    // },
    ylfile(e) {
      console.log(e);
      console.log(this.fileIds2, "this.fileIds2this.fileIds2");
      console.log(this.fileIds, "this.fileIds1this.fileIds1");

      this.suffix = e.suffix;
      if (e.suffix == "doc" || e.suffix == "docx") {
        this.$message.error("该文件暂不支持预览");
        return;
      }
      this.ylsrc = "http://gdysj.oss-cn-beijing.aliyuncs.com/" + e.path;
      this.pdfurl = "http://gdysj.oss-cn-beijing.aliyuncs.com/" + e.path;
      this.vdsrc = "http://gdysj.oss-cn-beijing.aliyuncs.com/" + e.path;
      this.adsrc = "http://gdysj.oss-cn-beijing.aliyuncs.com/" + e.path;
      this.visible = true;
    },
    // 上传头像
    async uploadImage(file, index) {
      // console.log(file);
      // console.log(index, "index2");
      // console.log(this.baseId,'baseid')
      if (this.baseId == undefined) {
        this.$message.error("请先填写资料再上传附件");
        return;
      }
      if (this.states != "0") {
        this.$message.error("当前项目已经提交不能再上传附件");
        return;
      }
      let files = file.file;
      const point = files.name.lastIndexOf(".");
      let suffix = files.name.substr(point);
      let fileName = files.name.substr(0, point);
      let date = Date.parse(new Date());
      let fileNames = `_${date}${suffix}`;
      var obj = {
        suffix: "素材",
        fileName: file.file.name,
        progress: 0,
      };
      // this.affixList.push(obj);
      this.listType2[this.index1].children[this.index2].children.push(obj);
      let result = await client.multipartUpload(
        "gdysj" + fileNames,
        file.file,
        {
          //   headers: {
          //     "Content-Disposition": "inline",
          //     "Content-Type": this.file.type, //注意：根据图片或者文件的后缀来设置，我试验用的‘.png’的图片，具体为什么下文解释
          //   },
          progress: (p, checkpoint) => {
            // this.tempCheckpoint = checkpoint;
            // this.uploadId = checkpoint.uploadId;
            // this.uploadName = checkpoint.name;
            let e = {};
            e.percent = p * 100;
            // file.onProgress(e);
            // this.affixList[this.affixList.length - 1].progress =
            //   e.percent.toFixed();
            this.listType2[this.index1].children[this.index2].children[
              this.listType2[this.index1].children[this.index2].children
                .length - 1
            ].progress = e.percent.toFixed();
            // 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
          },
          meta: { year: 2020, people: "dev" },
          // mime: this.file.type,
        }
      );
      console.log(result);
      const poin2t = result.name.lastIndexOf(".");
      // console.log(point)
      let obj1 = result.name.substring(poin2t + 1, obj.length);
      console.log(obj);
      ossUpload({
        url: result.res.requestUrls[0],
        path: result.name,
        fileName: file.file.name,
        size: file.file.size,
        suffix: obj1,
        typeId: this.typeId,
      }).then((res) => {
        console.log(res.data);
        // this.affixList[this.affixList.length - 1].path = res.data.path;
        // this.affixList[this.affixList.length - 1].suffix = res.data.suffix;
        // this.affixList.push(res.data)
        // this.listType2[this.index1].children[this.index2].children.push(
        //   res.data
        // );
        // this.$parent.getlistType()
        //  this.$emit('fatherMethod');
        this.fileIds2.push(res.data.id);
        obj.path = res.data.path;
        obj.suffix = res.data.suffix;
        this.$emit("fathersave");

        console.log(this.fileIds2);
        // this.save()
      });
      // var formData = new FormData();
      // var obj = {
      //   label: "素材",
      //   value: file.file.name,
      //   progress: 0,
      // };
      // this.affixList.push(obj);
      // formData.append("file", file.file);
      // axios({
      //   method: "post",
      //   url: this.BASEURL + "/common/aliyunOssMultipartUpload",
      //   data:formData,
      //   headers: { "Content-Type": "application/x-www-form-urlencoded" },
      //   onUploadProgress: (progressEvent) => {
      //     if (progressEvent.lengthComputable) {
      //       var complete =
      //         ((progressEvent.loaded / progressEvent.total) * 100) | 0;
      //       this.affixList[this.affixList.length-1].progress = complete;
      //     }
      //   },
      // }).then((res) => {
      //   console.log(res);
      // });
    },
  },
};
</script>

<style scoped>
.smbox {
  height: 40px;
  width: 200px;
  border: 1px solid #ccc;
  align-items: center;
  justify-content: space-around;
  display: flex;
  margin-right: 20px;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 10px;
  box-sizing: border-box;
}
.trash {
  width: 20px;
  height: 25px;
  cursor: pointer;
}
.jiahao {
  width: 40px;
  height: 40px;
}
.tabs {
  display: flex;
  border: 1px solid #ccc;
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
}
.leftboxt {
  text-align: center;
  line-height: 60px;
  width: 20%;
  border-right: 1px solid #ccc;
}
.rightbox {
  padding: 10px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 80%;
  flex-wrap: wrap;
}
.affix_list {
  color: #444;
  border: 1px solid #ccc;
  margin-bottom: 16px;
}
.title1 {
  font-size: 19px;
  font-weight: 600;
  margin: 20px 0;
}
.btn_up {
  width: 100%;
  /* display: flex; */
  /* justify-content: end; */
}
.list_item {
  border-bottom: 1px solid #ccc;
  display: flex;
}
.list_item:last-child {
  border: 0;
}
.list_item .label {
  width: 160px;
  padding: 10px;
  border-right: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list_item .value {
  flex: 1;
  padding: 4px 10px;
  border-right: 1px solid #ccc;
}
.list_item .action {
  padding: 10px;
  width: 200px;
  display: flex;
  justify-content: space-around;
  color: #1a60ff;
  align-items: center;
}
.action .delete,
.action .preview {
  cursor: pointer;
  border-bottom: 1px solid #1a60ff;
}
.action .delete span {
  margin-left: 4px;
}
.action .preview span {
  margin-right: 4px;
}
</style>
